/*
 * @Author: zhangzhanyan 
 * @Date: 2021-07-20 15:08:45 
 * @Last Modified by: zhangzhnayan
 * @Last Modified time: 2021-07-21 23:13:30
 */

import React, { Component } from 'react';

class footer extends Component {
    state = {
        tab: ["二手房", "小区"],
        i: 0,
        list: [
            [
                {
                    title: "开封二手房",
                }, {
                    title: "海口二手房",
                }, {
                    title: "昆明二手房",
                }, {
                    title: "大连二手房",
                }, {
                    title: "雅安二手房",
                }, {
                    title: "赤峰二手房",
                }, {
                    title: "抚顺二手房",
                }, {
                    title: "桂林二手房",
                }, {
                    title: "深圳二手房",
                }, {
                    title: "武汉二手房",
                }, {
                    title: "晋中二手房",
                }, {
                    title: "太仓二手房",
                }
            ],
            [
                {
                    title: "武汉小区",
                }, {
                    title: "南京小区",
                }, {
                    title: "江阴小区",
                }, {
                    title: "江门小区",
                }, {
                    title: "金华小区",
                }, {
                    title: "攀枝花小区",
                }, {
                    title: "宜昌小区",
                }, {
                    title: "常熟小区",
                }, {
                    title: "淮安小区",
                }, {
                    title: "银川小区",
                }, {
                    title: "西安小区",
                }, {
                    title: "九江小区",
                }
            ]
        ]
    }
    add = (index: number) => {
        console.log(index)
        this.setState({
            i: index
        })
    }
    render() {
        return (
            <div className="footer-warp">
                <div>
                    <span>北京手机链家网</span>
                    <span>|</span>
                    <span>隐私声明</span>
                    <span>|</span>
                    <span>营业执照</span>
                </div>
                <div>
                    {
                        this.state.tab.map((item, index) => {
                            return (
                                <div key={index} onClick={() => { this.add(index) }} className={index === this.state.i ? "active" : ''}>{item}</div>
                            )
                        })
                    }
                </div>
                <div className="footer-ol">
                    <ul>
                        {
                            this.state.list[this.state.i].map((item, index) => {
                                return <li key={index}>{item.title}</li>
                            })
                        }

                    </ul>
                </div>
            </div>
        );
    }
}

export default footer;